<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用定时器写轮播图</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box1{
            width: 500px;
            height: 335px;
            /*background-color: #bbffaa;*/
            margin: 50px auto;
            padding: 0px 0;
            position: relative;
            overflow: hidden;
        }
        #ullist{
            list-style: none;
            /*width: 2600px;*/
            position: absolute;
            /*left: -1040px;*/
        }
        #ullist li{
            float: left;
            margin: 0 0px;
        }
        #navDiv {
            position: absolute;
            bottom: 15px;
            /*left: 197px;!*设置div的偏移量居中间 用(box1的宽度减去navDiv的宽度)/2 但是这个值不能写死需要用js写入*!*/
        }
        #navDiv a{
            float: left;
            width: 15px;
            height: 15px;
            background-color: red;
            margin: 0 5px;/*设置外边距*/
            opacity:0.5;/*设置透明度*/
            /*透明度需要兼容IE8*/
            filter: alpha(opacity=50);
        }
        #navDiv a:hover{
            background-color: black;
        }
    </style>
    <script>
        window.onload=function () {
            //设置ullist的宽度
            var ullist=document.getElementById("ullist");
            var imgArr=document.getElementsByTagName("img");
            ullist.style.width=500*imgArr.length+"px";
            //设置导航的left偏移量
            var navDiv=document.getElementById("navDiv");
            var box1=document.getElementById("box1");
            navDiv.style.left=(box1.offsetWidth-navDiv.offsetWidth)/2+"px";
            var index=0;
            var allA=document.getElementsByTagName("a");
            allA[index].style.backgroundColor="black";

            //点击超链接切换到指定图片 点击第一个图片 显示第一个图片 点击第二个图片 显示第二张图片
                 for (var i=0;i<allA.length;i++){
                //为每一个超链接都添加一个num属性
                    allA[i].num=i;
                    allA[i].onclick=function () {
                        //当点击的时候 关闭定时器
                        clearInterval(timer);
                        index=this.num;//获取点击超链接的索引，并将其设置为index
                    //切换图片
                    // ullist.style.left=-520*index+"px";
                        setA(); //修改正在选中的a
                    //使用move函数来切换图片
                    move(ullist,"left",-500*index,20,function () {
                        autoChange();
                    });
                };
            }
            //自动切换图片
            autoChange();

            //创建一个方法设置选中的a
            function setA() {
                if (index>=imgArr.length-1){
                    index=0;
                    ullist.style.left=0;
                }
                for (var i=0;i<allA.length;i++){
                    allA[i].style.backgroundColor="";
                }
                //将选中的a设置为黑色
                allA[index].style.backgroundColor="black";
            }
            //定义一个定时器的标识
            var timer;
            function autoChange() {
                //开启定时器
                timer=setInterval(function () {
                    index++;//索引自增
                    //判断index的值
                    if (index>imgArr.length){
                        index=0;
                    }
                    move(ullist,"left",-500*index,20,function () {
                        setA();
                    })
                },300);
            }
        };



        function move(obj,attr,target,speed,callback) {
            //判断speed的正负值 如果从0-800则speed为正 ;如果800-0 则speed为负值
            var current=parseInt(getStyle(obj,attr));
            if (current>target){
                speed=-speed;
            }
            //点击按钮以后box1向右移动
            clearInterval(obj.timer);
            obj.timer=setInterval(function () {
                var oldValue=parseInt(getStyle(obj,attr));
                var newValue=oldValue+speed;
                //向右 移动0-800 需要判断newValue是否大于target
                //向左 移动800-0 需要判断newValue是否小于target
                if ((speed>0&&newValue>target) ||(speed<0&&newValue<target)){
                    newValue=target;
                }
                obj.style[attr]=newValue+"px";
                if (newValue==target){
                    clearInterval(obj.timer);
                    callback&&callback();
                }
            },50);
        }
        function getStyle(obj,name){
            // if (window.getComputedStyle){
            //     return getComputedStyle(obj,null)[name];//正常浏览器的方式
            // }else {
            //     return obj.currentStyle[name];//IE
            // }
            return window.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentStyle[name];

        }
    </script>
</head>
<body>
<div id="box1">
    <ul id="ullist">
        <li><img src="../imagconman/1.jpg" alt=""></li>
        <li><img src="../imagconman/2.jpg"  alt=""></li>
        <li><img src="../imagconman/3.jpg" alt=""></li>
        <li><img src="../imagconman/4.jpg"  alt=""></li>
        <li><img src="../imagconman/5.jpg" alt=""></li>
        <li><img src="../imagconman/1.jpg" alt=""></li>
    </ul>
    <div id="navDiv">
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
    </div>
</div>
</body>
</html>